<template>
	<view>
		<u-dropdown class="self_drop">
			<u-dropdown-item v-model="params.jobid" :title="jobText" :options="options_job"
				@change="doSearch('options_job',$event)" />
			<u-dropdown-item v-model="params.settr" :title="settrText" :options="options_settr"
				@change="doSearch('options_settr',$event)" />
		</u-dropdown>
		<view class="form_split_10"></view>
		<view class="notice_bar">视频面试房间仅在面试当天开启，在面试时间15天之后自动关闭</view>
		<u-empty text="没有找到对应的数据" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<view v-for="(item, index) in dataset" :key="index" @click="handleClick(item,'1')">
					<view class="box_item">
						<view class="tx1">
							<view class="name">{{ item.fullname }}</view>
							<view class="right_txt">{{ item.addtime | timeFilter }}</view>
						</view>
						<view class="tx2">{{ item.age }}岁 · {{ item.sex_text }} ·
							{{ item.education_text }} ·
							{{ item.experience_text }}
							<view class="right_txt" v-if="item.is_look == 1">已查看</view>
							<view class="right_txt not_download" v-else>未查看</view>
						</view>
						<view class="tx3" @click.stop="handlerDetail(item)">
							<view class="name">职位名称：{{ item.jobname }}</view>
							<view class="time_txt">面试时间：{{ item.interview_time | interviewTimeFilter }}</view>
						</view>
						<view class="tx4">
							<view class="list_btn" v-if="item.room_status=='nostart'">房间未开启</view>
							<view class="list_btn" v-if="item.room_status=='overtime'">房间已关闭</view>
							<view class="list_btn orange" @click.stop="handlerNotice(item.id)"
								v-if="item.room_status=='opened'">提醒上线</view>
							<view class="list_btn" @click.stop="copyUrl(item.id)" v-if="item.room_status=='opened'">复制链接
							</view>
							<view class="list_btn" @click.stop="handleClick(item,'2')"
								v-if="item.room_status=='opened'">进入房间</view>
							<view class="clear"></view>
						</view>
					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<u-loadmore v-if="dataset.length > params.pagesize" class="u-loadmore" :status="finished_status" />
		</view>
		<u-modal v-model="showDetail" title="面试邀请详情">
			<view class="interview_details_pop_box">
				<view class="detail_line">
					<view class="line_left">面试职位：</view>
					<view class="line_right">
						<text class="a_black">{{ detailInfo.jobname }}</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">公司名称：</view>
					<view class="line_right">
						<text class="a_black">{{ detailInfo.companyname }}</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">面试时间：</view>
					<view class="line_right">
						{{ detailInfo.interview_time | interviewTimeFilter }}
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">联系信息：</view>
					<view class="line_right">
						<text class="a_blue">{{ detailInfo.tel }}</text>
						({{ detailInfo.contact }})
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">备注信息：</view>
					<view class="line_right">
						请在正式面试前30分钟做好面试准备和设备调试，准时参加视频面试
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_desc">
					温馨提示：招聘企业无权收取任何费用,面试求职中请加强自我保护,避免上当受骗！
				</view>
			</view>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		formatTime,
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import ScrollNav from '@/components/ScrollNav'
	export default {
		name: 'ResumeVideoInvitation',
		components: {
			ScrollNav
		},
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				jobText: '全部职位',
				settrText: '不限发送时间',
				dataset: [],
				finished_status: 'loadmore',
				show_empty: false,
				params: {
					jobid: 0,
					settr: '',
					page: 1,
					pagesize: 15
				},
				options_job: [{
					label: '全部职位',
					value: 0
				}],
				options_settr: [{
						label: '不限发送时间',
						value: ''
					},
					{
						label: '3天内',
						value: 3
					},
					{
						label: '7天内',
						value: 7
					},
					{
						label: '15天内',
						value: 15
					},
					{
						label: '30天内',
						value: 30
					}
				],
				showDetail: false,
				detailInfo: {}
			}
		},
		created() {
			this.fetchData(true)
		},
		methods: {
			handleClick(item, val) {
				if (val == '1') {
					uni.navigateTo({
						url: '/resume/id=' + item.resume_id
					})
				} else if (val == '2') {
					uni.navigateTo({
						url: '/video/id=' + item.resume_id
					})
				}

			},
			handlerNotice(id) {
				this.$dialog
					.confirm({
						title: '系统提示',
						message: '确定提醒求职者吗？'
					})
					.then(() => {
						http
							.post(api.company_interview_video_notice, {
								id
							})
							.then(res => {
								this.$refs.uTips.show({
									title: '提醒成功',
									type: 'success'
								})
							})
							.catch(() => {})
					})
					.catch(() => {
						// on cancel
					})
			},
			copyUrl(id) {
				var oInput = document.createElement('input')
				oInput.value = this.$store.state.config.mobile_domain + 'video/' + id
				document.body.appendChild(oInput)
				oInput.select() // 选择对象
				document.execCommand('Copy') // 执行浏览器复制命令
				oInput.className = 'oInput'
				oInput.style.display = 'none'
				this.$toast('复制成功')
			},
			fetchData(init) {
				this.options_job = [{
					label: '全部职位',
					value: 0
				}]
				this.show_empty = false
				if (init === true) {
					this.params.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.company_interview_video_list, this.params)
					.then(res => {
						if (init === true) {
							let options_job = [...res.data.data.option_jobs]
							options_job.forEach(element => {
								this.options_job.push({
									label: element.jobname,
									value: element.id
								})
							})
							this.dataset = [...res.data.data.items]
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}

						// 数据全部加载完成
						if (res.data.data.items.length < this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			doSearch(type, val) {
				switch (type) {
					case 'options_job':
						let jobText = this.options_job.filter(res => {
							return parseInt(res.value) === parseInt(val)
						})
						this.jobText = jobText.length > 0 ? jobText[0].label : '全部职位'
						break;
					case 'options_settr':
						let settrText = this.options_settr.filter(res => {
							return parseInt(res.value) === parseInt(val)
						})
						this.settrText = settrText.length > 0 ? settrText[0].label : '不限发送时间'
						break;
					default:
						break;
				}
				this.params.page = 1
				this.fetchData(true)
			},
			handlerDetail(item) {
				this.detailInfo = item
				this.showDetail = true
			},
			onload() {
				this.params.page++
				this.fetchData(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.interview_details_pop_box {
		max-height: 600rpx;
		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 26rpx;
		padding: 40rpx;

		.detail_desc {
			width: 100%;
			background-color: #f5f5f5;
			line-height: 1.5;
			color: #666666;
			padding: 16rpx 40rpx;
			margin-top: 20rpx;
		}

		.detail_line {
			line-height: 1.5;
			margin-bottom: 10rpx;

			.line_left {
				float: left;
				color: #999999;
				text-align: right;
				width: 160rpx;
				line-height: 1.5;
			}

			.line_right {
				float: left;
				color: #333333;
				word-break: break-all;
				width: 380rpx;
				text-align: left;
				line-height: 1.5;

				.a_black {
					color: #333333;
					text-decoration: none;
				}

				.a_blue {
					color: #1887fb;
					text-decoration: none;
				}
			}
		}
	}

	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 0 32rpx 40rpx 32rpx;

			.tx4 {
				.list_btn {
					float: right;
					font-size: 24rpx;
					padding: 8rpx 36rpx;
					background-color: #fff;
					border: 2rpx solid #e2e2e2;
					margin-left: 24rpx;
					border-radius: 52rpx;

					&.orange {
						border-color: #ff5d24;
						color: #ff5d24;
					}
				}
			}

			.tx3 {
				width: 100%;
				border-radius: 16rpx;
				box-shadow: 0 0 10rpx #c2c2c2;
				position: relative;
				padding: 28rpx 0 24rpx;
				margin-bottom: 34rpx;

				&::after {
					position: absolute;
					right: 34rpx;
					top: 62rpx;
					width: 14rpx;
					height: 14rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: "";
				}

				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: 580rpx;
					padding: 0 0 0 82rpx;
					background: url($ImgUrl + "interview_name_ico.png") 36rpx 4rpx no-repeat;
					background-size: 34rpx 32rpx;
					margin-bottom: 16rpx;
				}

				.time_txt {
					font-size: 24rpx;
					color: #999999;
					padding: 0 0 0 82rpx;

					.time {
						color: #1787fb;
					}
				}
			}

			.tx2 {
				font-size: 28rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				padding-right: 120rpx;
				margin-bottom: 34rpx;

				.right_txt {
					position: absolute;
					right: 0;
					top: -2rpx;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					background-color: #fafafa;
					border-radius: 6rpx;
					color: #999999;

					&.not_download {
						color: #ff5d24;
						background-color: #fffbf8;
					}
				}
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;
				padding: 38rpx 0 0;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					max-width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.right_txt {
					position: absolute;
					right: 0;
					top: 44rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.notice_bar {
		width: 100%;
		padding: 22rpx 0 22rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background: #fffbeb url($ImgUrl + "remind_ico.svg") 32rpx center no-repeat;
		background-size: 32rpx;
	}
</style>
